<template>
  <div class="center">
    <div class="center-wrapper">
      <div class="user-info">
        <div class="user-base-info v-flex-row-between">
          <div class="base-info v-flex-row-between">
            <div class="user-avatar">
              <img src="/static/mock-image/avatar.jpg" alt="">
            </div>
            <div class="user-nick-point v-flex-column-between">
              <div class="user-nick-name">
                <span class="user-name">沃创科技 </span>
                <img src="/static/image/center/vip.png" alt="">
              </div>
              <div class="user-point">我的积分：<span>155656</span><span>分</span></div>
            </div>
          </div>
          <div class="user-sign-in v-flex-row-start">
            <div class="sign-in-icon"><img src="/static/image/center/sign-in.png" alt=""></div>
            <div class="sign-in-text">签到</div>
          </div>
        </div>
        <div class="study-times-wrapper v-flex-row-around">
          <div class="study-times">
            <div class="times-wrapper"><span class="study-tips">15</span><span>分钟</span></div>
            <div class="study-types">今日学习</div>
          </div>
          <div class="study-times">
            <div class="times-wrapper"><span class="study-tips">15</span><span>小时</span></div>
            <div class="study-types">本周学习</div>
          </div>
          <div class="study-times">
            <div class="times-wrapper"><span class="study-tips">15</span><span>小时</span></div>
            <div class="study-types">累计学习</div>
          </div>
        </div>
      </div>
      <!--成为vip-->
      <div class="become-vip-wrapper" @click="toMemberPay">
        <div class="cell-wrapper v-flex-row-between">
          <div class="cell-title v-flex-row-between">
            <div class="vip-icon"><img src="/static/image/center/vip.png" alt=""></div>
            <div class="title">成为VIP,专享免费学习</div>
          </div>
          <div class="cell-arrow-icon">
            <img src="/static/image/center/arrow-right.png" alt="">
          </div>
        </div>
      </div>
      <!--内容-->
      <div class="center-content">
        <div class="cell-center-wrapper border-bottom v-flex-row-between" @click="toMyCourses">
          <div class="cell-center-title-part v-flex-row-between">
            <div class="cell-icon">
              <img src="/static/image/center/curriculum.png" alt="">
            </div>
            <div class="cell-center-title">我的课程</div>
          </div>
          <div class="cell-center-arrow-right">
            <img src="/static/image/center/arrow-right.png" alt="">
          </div>
        </div>
        <div class="cell-center-wrapper border-bottom v-flex-row-between" @click="myCoupon">
          <div class="cell-center-title-part v-flex-row-between">
            <div class="cell-icon">
              <img src="/static/image/center/coupon.png" alt="">
            </div>
            <div class="cell-center-title">我的代金券</div>
          </div>
          <div class="cell-center-arrow-right">
            <img src="/static/image/center/arrow-right.png" alt="">
          </div>
        </div>
        <div class="cell-center-wrapper border-bottom v-flex-row-between" @click="toStudyRecommend">
          <div class="cell-center-title-part v-flex-row-between">
            <div class="cell-icon">
              <img src="/static/image/center/study-recommend.png" alt="">
            </div>
            <div class="cell-center-title">学习记录</div>
          </div>
          <div class="cell-center-arrow-right">
            <img src="/static/image/center/arrow-right.png" alt="">
          </div>
        </div>
        <div class="cell-center-wrapper border-bottom v-flex-row-between" @click="toMyCollect">
          <div class="cell-center-title-part v-flex-row-between">
            <div class="cell-icon">
              <img src="/static/image/center/favorite.png" alt="">
            </div>
            <div class="cell-center-title">我的收藏</div>
          </div>
          <div class="cell-center-arrow-right">
            <img src="/static/image/center/arrow-right.png" alt="">
          </div>
        </div>
        <div class="cell-center-wrapper v-flex-row-between" @click="toProblem">
          <div class="cell-center-title-part v-flex-row-between">
            <div class="cell-icon">
              <img src="/static/image/center/issue.png" alt="">
            </div>
            <div class="cell-center-title">常见问题</div>
          </div>
          <div class="cell-center-arrow-right">
            <img src="/static/image/center/arrow-right.png" alt="">
          </div>
        </div>
      </div>

    </div>

    <!--底部自定义tabbar-->
    <div class="footer-wrapper">
      <tab-bar selected="4"></tab-bar>
    </div>
  </div>
</template>

<script>
  import TabBar from "components/tabBar/tabBar";

  export default {
    name: "center.vue",
     methods:{
      // 成为会员
      toMemberPay () {
        this.$router.push({
          path:'/pages/memberPay/memberPayDetails'
        })
      },
      // 我的课程
       toMyCourses(){
         this.$router.push({path:'/pages/myCourses/myCourses'})
       },
       // 我的代金券
       myCoupon () {
         this.$router.push({
           path:'/pages/coupon/coupon',
           query:{} // 跳转带参
         })
       },
       // 学习记录
       toStudyRecommend () {
         this.$router.push({
           path:'/pages/studyRecommend/studyRecommend',
           query:{} // 跳转带参
         })
       },
       toMyCollect () {
         this.$router.push({
           path:'/pages/myCollect/myCollect',
           query:{} // 跳转带参
         })
       },
       // 常见问题
       toProblem () {
         this.$router.push({path:'/pages/problem/problem'})
       }
     },
    components: {
      TabBar
    }
  };
</script>

<style scoped lang="less">
  .center {
    padding-bottom:132rpx;
  }
  .user-info {
    height: 260rpx;
    /*background:linear-gradient(45deg,rgba(18,102,254,1),rgba(43,128,255,1));*/
    /*box-shadow:0px 1px 5px 0px rgba(233,233,233,0.54);*/
    background-color: #2B80FF;
    .user-base-info {
      padding: 20rpx 20rpx;
      .base-info {
        .user-avatar {
          width: 107rpx;
          height: 107rpx;
          background: rgba(165, 165, 165, 1);
          border-radius: 50%;
          & > img {
            width:107rpx;
            height: 107rpx;
            border-radius: 50%;
          }
        }
        .user-nick-point {
          padding: 10rpx 26rpx;
          color: #fff;
          .user-nick-name {
            font-size: @font_size_34;
            & > img {
              width: 44rpx;
              height: 40rpx;
            }
          }
        }
      }
    }
  }

  .user-sign-in {
    color: #fff;
    .sign-in-icon {
      padding: 0rpx 10rpx;
      & > img {
        width: 30rpx;
        height: 32rpx;
      }
      .sign-in-text {
        align-self: center;
      }
    }
  }

  .study-times-wrapper {
   // width: 96%;
    width:720rpx;
    height: 227rpx;
    margin: 0px auto;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0rpx 16rpx 10rpx #ccc;
    .study-times {
      .times-wrapper {
        padding: 3px 0px;
        color: #2B80FF;
        .study-tips {
          font-size: @font_size_40;
          font-weight: bold;
        }
      }
      .study-types {
        padding: 6rpx 0px;
        color: #515151;
        font-size:24rpx;
        font-weight: 400;
      }
    }
  }

  .become-vip-wrapper {
    width: 720rpx;
    margin: 140rpx auto 20rpx auto;
    background-color: #fff;
    border-radius: 10rpx;
  }

  .cell-wrapper {
    margin: 0 auto;
    height: 100rpx;
    box-sizing: border-box;
    padding: 0rpx 44rpx 0rpx 30rpx;
    margin: 0px auto;
    .cell-title {
      .vip-icon {
        & > img {
          width: 44rpx;
          height: 40rpx;
        }
      }
      .title {
        color: #2B80FF;
        font-size: 28rpx;
        padding-left:15rpx;
      }
    }
    .cell-arrow-icon {
      width: 14rpx;
      height: 24rpx;
      & > img {
        width: 14rpx;
        height: 24rpx;
      }
    }
  }
  .center-content :nth-last-child(1){
    border-bottom-left-radius: 5rpx;
    border-bottom-right-radius: 5rpx;
  }
  .center-content :nth-child(1) {
    border-top-left-radius: 5rpx;
    border-top-right-radius: 5rpx;
  }
  .cell-center-wrapper {
    width: 96%;
    height: 100rpx;
    background-color: @bg_color;
    margin: 0 auto;
    padding: 0rpx 44rpx 0rpx 30rpx;
    .cell-center-title-part {
      .cell-icon {
        & > img {
          width: 25rpx;
          height: 24rpx;
        }
      }
      .cell-center-title {
        padding: 0rpx 12rpx;
        color: #333;
        font-size:@font_size_24;
      }
    }
    .cell-center-arrow-right {
      width: 14rpx;
      height: 24rpx;
      & > img {
        width: 14rpx;
        height: 24rpx;
      }
    }
  }
  .user-point {
    color:#FFFFFF;
    font-size:@font_size_24;
  }
  .user-name {
    font-size:@font_size_34;
    font-weight:bold;
    color:#fff;
  }
</style>
